<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明天银行管理员页面</title>
    <script src="js/axios.min.js"></script>
    <!-- 先引入vue的js文件 -->
    <script src="js/vue.min.js"></script>
    <!-- 引入elementUI全局css样式 -->
    <link rel="stylesheet" href="elementUI/index.css">
    <!-- 引入elementUI动态效果 -->
    <script src="elementUI/index.js"></script>
    <style>
        body {
            margin: 0;
        }
        
        .top {
            width: 100%;
            text-align: center;
            background-color: antiquewhite;
        }
        
        .left {
            width: 25%;
            text-align: left;
        }
        
        .right {
            height: 100vh;
            text-align: center;
            background-color: rgb(234, 225, 211);
        }
        
        .bottom {
            text-align: center;
            background-color: rgb(93, 90, 90);
            color: aliceblue;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        
        .navigationBar {
            width: 100%;
            height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding: 2%;
        }
        
        .navigationBar * {
            width: 100%;
            font-size: large;
            box-sizing: border-box;
        }
        
        .main * {
            font-size: large;
        }
        
        .exit {
            position: fixed;
            right: 0;
            top: 5px;
        }
        
        .el-table>* {}
        
        .el-table__header-wrapper+.el-table__body-wrapper {
            width: 100%;
        }
    </style>
</head>

<body>
    <el-container id="app">
        <el-header class="top" style="height: 50px;">
            <h2>欢迎 {{admin.userType}} {{admin.name}} 进入本网站</h2>
            <el-button type="primary" class="exit" @click="onExit()">退出</el-button>
        </el-header>
        <el-container class="main">
            <el-aside class="left" style="width: 25%;">
                <el-menu default-active="1" class="navigationBar" text-color="black" active-text-color="black">
                    <el-submenu>
                        <template slot="title">
                            <span>功能栏</span>
                        </template>
                        <el-menu-item index="1" @click="selectTab(1)">个人信息</el-menu-item>
                        <el-menu-item index="2" @click="selectTab(2)">修改密码</el-menu-item>
                        <el-menu-item index="3" @click="selectTab(3)">用户信息管理</el-menu-item>
                        <el-menu-item index="4" @click="selectTab(4)">管理员信息管理</el-menu-item>
                        <el-menu-item index="4" @click="selectTab(5)">账户注册</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main class="right">
                <div v-show="tabSelected === 1">
                    <el-descriptions title="管理员个人信息">
                        <el-descriptions-item span="3" label="管理员账户">{{admin.userName}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="管理员密码">{{admin.passWord}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="管理员昵称">{{admin.name}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="管理员邮箱">{{admin.email}}</el-descriptions-item>
                        <el-descriptions-item span="3" label="管理员简介">{{admin.detailed}}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div v-show="tabSelected === 2">
                    <el-form ref="reviseform" :model="reviseform" label-width="20%">
                        <el-form-item label="旧密码：">
                            <el-input v-model="reviseform.password" placeholder="请输入你账户的旧密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码：">
                            <el-input v-model="reviseform.newPassword" placeholder="请输入你的账户新密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码：">
                            <el-input v-model="reviseform.reNewPassword" placeholder="请重新输入你的账户新密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="ReviceForm()">确认修改</el-button>
                            <el-button @click="CancelRevise()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-show="tabSelected === 3">
                    <el-table v-loading="table.loading" :data="table.tableData" style="width: 100%">
                        <el-table-column prop="id" label="用户id" style="width: 14%">
                        </el-table-column>
                        <el-table-column prop="userName" label="账户" style="width: 14%">
                        </el-table-column>
                        <el-table-column prop="passWord" label="密码" style="width: 14%">
                        </el-table-column>
                        <el-table-column prop="name" label="昵称" style="width: 14%">
                        </el-table-column>
                        <el-table-column prop="email" label="邮箱" style="width: 14%">
                        </el-table-column>
                        <el-table-column prop="balance" label="金额" style="width: 14%">
                        </el-table-column>
                        <el-table-column label="管理" style="width: 14%">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="resetUser(scope.$index, scope.row)">重置密码</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="deleteUser(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :current-page="table.currentPage" :page-sizes="table.PageSizes" :page-size="table.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="table.total">
                    </el-pagination>
                </div>
                <div v-show="tabSelected === 4">
                    <el-table v-loading="table.loading" :data="table.tableData" style="width: 100%">
                        <el-table-column prop="id" style="width: 14%" label="管理员id">
                        </el-table-column>
                        <el-table-column prop="userName" style="width: 14%" label="账户">
                        </el-table-column>
                        <el-table-column prop="passWord" style="width: 14%" label="密码">
                        </el-table-column>
                        <el-table-column prop="name" style="width: 14%" label="昵称">
                        </el-table-column>
                        <el-table-column prop="email" style="width: 14%" label="邮箱">
                        </el-table-column>
                        <el-table-column prop="detailed" style="width: 14%" label="简介">
                        </el-table-column>
                        <el-table-column label="管理" style="width: 14%">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="deleteAdmin(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="SizeChange" @current-change="CurrentChange" :current-page="table.currentPage" :page-sizes="table.PageSizes" :page-size="table.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="table.total">
                    </el-pagination>
                </div>
                <div v-show="tabSelected === 5">
                    <el-form ref="register" :model="register" label-width="10%">
                        <el-form-item label="注册用户名：">
                            <el-input v-model="register.username" placeholder="请输入注册用户名" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="请输入密码：">
                            <el-input v-model="register.password" placeholder="请输入注册账户密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码：">
                            <el-input v-model="register.newPassword" placeholder="请重新输入注册账户密码" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称：">
                            <el-input v-model="register.name" placeholder="请重新输入注册账户昵称" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="注册邮箱：">
                            <el-input v-model="register.email" placeholder="请重新输入注册账户邮箱" style="width: 80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="账号类型：">
                            <el-radio-group v-model="register.type" size="medium">
                                <el-radio-button label="admin" name="type">管理员</el-radio-button>
                                <el-radio-button label="user" name="type">用户</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="Register()">注册</el-button>
                            <el-button @click="CancelRegister()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
        <el-footer class="bottom" style="height: 25px;">明天银行在线网站</el-footer>
    </el-container>
</body>
<script>
    vm = new Vue({
        el: "#app",
        data: {
            tabSelected: 0, // 默认不显示任何页面
            // 用户详情表数据
            admin: {
                userType: "管理员",
                userName: "user",
                passWord: "user",
                name: "明天",
                email: "sdajfkl@sa.com",
                detailed: "瞎玩"
            },
            // 用户修改密码表单
            reviseform: {
                password: "",
                newPassword: "",
                reNewPassword: "",
            },
            // 用户表所有数据
            table: {
                type: "",
                tableData: {},
                total: 0,
                pageSize: 10,
                PageSizes: [5, 10, 20, 50, 100, 150],
                currentPage: 1,
                loading: false
            },
            //注册表单提交
            register: {
                type: "user",
                email: "",
                username: "",
                password: "",
                name: "",
                newPassword: ""
            }
        },
        methods: {
            // 用户退出关闭回话操作
            onExit() {
                axios({
                    method: 'post',
                    url: 'adminMain',
                    params: {
                        "code": -1,
                    },
                    responseType: 'json'
                }).then(response => {
                    let data = response.data;
                    window.location.href = data.redirectUrl;
                }).catch(error => {
                    console.log(error);
                });
            },
            // 用户点击相关功能跳转操作
            selectTab(tabNumber) {
                this.tabSelected = tabNumber;
                if (tabNumber === 1) {
                    axios({
                        method: 'post',
                        url: 'adminMain',
                        params: {
                            "code": tabNumber,
                        },
                        responseType: 'json'
                    }).then(response => {
                        // console.log(response.data);
                        let data = response.data.data;
                        this.admin.userName = data.userName;
                        this.admin.passWord = data.passWord;
                        this.admin.detailed = data.detailed;
                        this.admin.email = data.email;
                        this.admin.name = data.name;
                    }).catch(error => {
                        console.log(error);
                    });
                } else if (tabNumber === 3) {
                    this.table.currentPage = 1;
                    this.table.type = "user";
                    this.SizeChange(5);
                } else if (tabNumber === 4) {
                    this.table.currentPage = 1;
                    this.table.type = "admin";
                    this.SizeChange(5);
                }
            },
            //管理员修改密码
            ReviceForm() {
                axios({
                    method: 'post',
                    url: 'adminMain',
                    params: {
                        "code": 2,
                        "password": this.reviseform.password,
                        "newPassword": this.reviseform.newPassword,
                        "reNewPassword": this.reviseform.reNewPassword,
                    },
                    responseType: 'json'
                }).then(response => {
                    let data = response.data;
                    // console.log(data);
                    if (data.resReset) {
                        this.reviseform.password = "";
                        this.reviseform.newPassword = "";
                        this.reviseform.reNewPassword = "";
                        this.selectTab(1);
                        this.$message(data.msg);
                    } else {
                        this.$message(data.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            // 取消修改密码
            CancelRevise() {
                this.reviseform.password = "";
                this.reviseform.newPassword = "";
                this.reviseform.reNewPassword = "";
                this.selectTab(1);
            },
            // 管理员设置页面大小的操作
            SizeChange(val) {
                this.table.pageSize = val;
                this.table.loading = true;
                axios({
                    method: 'post',
                    url: 'adminMain',
                    params: {
                        "code": 21,
                        "type": this.table.type,
                        "pageSize": this.table.pageSize,
                        "currentPage": this.table.currentPage
                    },
                    responseType: 'json'
                }).then(response => {
                    console.log(response.data)
                    let resultData = response.data.resultData;
                    this.table.tableData = resultData.data;
                    this.table.total = resultData.code;
                    this.table.loading = false;
                }).catch(error => {
                    console.log(error);
                });
            },
            // 管理员进行页面跳转的操作
            CurrentChange(val) {
                this.table.currentPage = val;
                try {
                    this.table.loading = true;
                    setTimeout(function() {
                        this.$message.success("加载成功！");
                        axios({
                            // 请求方式
                            method: 'post',
                            url: 'adminMain',
                            params: {
                                "code": 22,
                                "type": this.table.type,
                                "pageSize": this.table.pageSize,
                                "currentPage": this.table.currentPage
                            },
                            responseType: 'json'
                        }).then(response => {
                            let resultData = response.data.resultData;
                            this.table.tableData = resultData.data;
                            this.table.total = resultData.code;
                            this.table.loading = false;
                        }).catch(error => {
                            console.log(error);
                        });
                    }.bind(this), 2000);
                } catch (error) {
                    console.error(error);
                }
            },
            //用户密码重置
            resetUser(index, tableData) {
                // console.log(tableData);
                axios({
                    method: 'post',
                    url: 'adminMain',
                    params: {
                        "code": 31,
                        "id": tableData.id
                    },
                    responseType: 'json'
                }).then(response => {
                    // console.log(response.data)
                    this.CurrentChange(this.table.currentPage);
                }).catch(error => {
                    console.log(error);
                });
            },
            //删除User
            deleteUser(index, tableData) {
                axios({
                    method: 'post',
                    url: 'adminMain',
                    params: {
                        "code": 32,
                        "id": tableData.id
                    },
                    responseType: 'json'
                }).then(response => {
                    // console.log(response.data);
                    this.CurrentChange(this.table.currentPage);
                }).catch(error => {
                    console.log(error);
                });
            },
            //删除Admin
            deleteAdmin(index, tableData) {
                // console.log(index);
                // console.log(tableData);
                axios({
                    method: 'post',
                    url: 'adminMain',
                    params: {
                        "code": 4,
                        "id": tableData.id
                    },
                    responseType: 'json'
                }).then(response => {
                    // console.log(response.data);
                    this.$message(response.data.msg)
                    this.CurrentChange(this.table.currentPage);
                }).catch(error => {
                    console.log(error);
                });
            },
            //注册账户
            Register() {
                axios({
                    method: 'post',
                    url: 'adminMain',
                    params: {
                        "code": 5,
                        "type": this.register.type,
                        "email": this.register.email,
                        "username": this.register.username,
                        "password": this.register.password,
                        "name": this.register.name,
                        "newPassword": this.register.newPassword
                    },
                    responseType: 'json'
                }).then(response => {
                    console.log(response.data);
                    let data = response.data;
                    if(data.res === -1) {
                        this.$message(data.msg);
                    } else {
                        if(this.register.type === "user"){
                            this.selectTab(3);
                        } else {
                            this.selectTab(4);
                        }
                        this.CurrentChange(this.table.total / this.table.pageSize + 1);
                        this.$message(data.msg);
                        this.register.email = "";
                        this.register.username = "";
                        this.register.password = "";
                        this.register.name = "";
                        this.register.newPassword = "";
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //取消注册
            CancelRegister() {
                this.selectTab(1);
                this.register.type = "user";
                this.register.email = "";
                this.register.username = "";
                this.register.password = "";
                this.register.newPassword = "";
            }
        }
    })
</script>

</html>